<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
	    <meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
		<link rel="stylesheet" type="text/css" href="/stylesheets/table.css">
		<script language="javascript">
		    function request_test(){
			    var req = new XMLHttpRequest();
				req.open("GET", "/osimtest/execute/", true);
				req.send(null);
			}
			
			function send_url(){
			    var req = new XMLHttpRequest();
				var urlinput = document.getElementById("site_input");
				if (urlinput.value) {
				    req.open("POST", "/osimtest/seturl/", true);
					req.send(urlinput.value);
				} else {
				}
			}
		</script>
		<script language="javascript">
			window.onscroll = function() {
				float_tabe();
				float_mask();
				float_table();
			}
			
			function float_tabe() {
				var fl = document.getElementById("tabs");
				var originalFl = fl.offsetTop;
				var current_fl;
				if(document.documentElement && document.documentElement.scrollTop) {
				    current_fl = fl.offsetTop - document.documentElement.scrollTop;
				} else {
					current_fl = fl.offsetTop - document.body.scrollTop;					
				}
				
				if(current_fl >= 1) {
					fl.className = "al fl";
					fl.style.top = "0px";
					fl.style.width = "950px";
					//fl.style.height = "22px";
				} 
				if(current_fl == originalFl) {
					fl.className = "al";
					fl.style.top = "";
					fl.style.width = "";
					//fl.style.height = "";
				}
			}
			
			function float_table() {
				var fl = document.getElementById("table_head");
				var originalFl = fl.offsetTop;
				var current_fl;
				if(document.documentElement && document.documentElement.scrollTop) {
				    current_fl = fl.offsetTop - document.documentElement.scrollTop;
				} else {
					current_fl = fl.offsetTop - document.body.scrollTop;					
				}
				
				if(current_fl >= 1) {
					fl.className = "al fl";
					fl.style.top = "28px";
					fl.style.width = "900px";
					//fl.style.height = "22px";
				} 
				if(current_fl == originalFl) {
					fl.className = "al";
					fl.style.top = "";
					fl.style.width = "";
					//fl.style.height = "";
				}			
			}
			
			function float_mask() {
				var fl = document.getElementById("mask");
				var originalFl = fl.offsetTop;
				var current_fl;
				if(document.documentElement && document.documentElement.scrollTop) {
				    current_fl = fl.offsetTop - document.documentElement.scrollTop;
				} else {
					current_fl = fl.offsetTop - document.body.scrollTop;					
				}
				
				if(current_fl >= 1) {
					fl.className = "al fl";
					fl.style.top = "26px";
					fl.style.width = "900px";
					//fl.style.height = "22px";
				} 
				if(current_fl == originalFl) {
					fl.className = "al";
					fl.style.top = "";
					fl.style.width = "";
					//fl.style.height = "";
				}			
			}
		</script>
	</head>
    <body id="main_page">
		<div id="header">
		    <h1>OSIM Automation</h1>
			<div id="tabs" class="al">
		        <ul id="tabs">
					{% block title %}{% endblock %}
			    </ul>
			</div>
		</div>
		{% block content %}{% endblock %}
		
	</body>
</html>
